<div class="d-flex justify-content-center Body">
    <div class="d-flex align-items-center login-content">
        <form class="Form" [formGroup]="myForm">
            <h3 class="d-flex justify-content-center Body">用户登录</h3>
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name" aria-describedby="输入用户名" name="name" formControlName="name" [ngClass]="{'is-invalid':name.invalid,'is-valid':name.valid}">
                <div class="valid-feedback">
                    用户名格式正确！
                </div>
                <div class="invalid-feedback">
                    <span *ngIf="name.hasError('invalidUser')">用户名必须以zime开头!</span>
                    <span *ngIf="!name.hasError('invalidUser') && !name.hasError('minLength') ">用户名长度不得小于7位</span>
                </div>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" formControlName="password" [ngClass]="{'is-invalid':password.invalid,'is-valid':password.valid}">
                <div class="valid-feedback">
                    密码正确！
                </div>
                <div class="invalid-feedback">
                    <span *ngIf="password.hasError('required')">密码必须填写！</span>
                    <span *ngIf="!password.hasError('required') && !password.hasError('minLength')">密码长度不得小于6位!</span>
                </div>
            </div>
            <div class="form-group">
                <label for="newpassword">新密码</label>
                <input type="text" class="form-control" id="newpassword" name="newpassword" formControlName="newpassword">
            </div>
            <button type="submit" class="btn btn-primary btn-block" (click)="login()">登录</button>
            <button type="submit" class="btn btn-primary btn-block" (click)="onSubmit()">查询</button>
            <button type="submit" class="btn btn-primary btn-block" (click)="add()">增加</button>
            <button type="submit" class="btn btn-primary btn-block" (click)="delete()">删除</button>
            <button type="submit" class="btn btn-primary btn-block" (click)="xiugai()">修改</button>
            <button type="submit" class="btn btn-primary btn-block" (click)="logout()">退出</button>
        </form>

    </div>
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">学号</th>
            <th scope="col">姓名</th>
            <th scope="col">密码</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users; let i = index">
            <th scope="row">{{i}}</th>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
        </tr>
    </tbody>
</table>